<!--
 * @Author: 黄达全
 * @Date: 2024-08-03 20:38:58
 * @LastEditTime: 2024-08-10 20:41:23
-->
<script lang="ts" setup>
import { ref } from 'vue'

const { title, direction, size } = defineProps({
    title: {
        type: String,
        required: true
    },
    direction: {
        type: String,
        default: 'rtl'
    },
    size: {
        type: String,
        default: '30%'
    }
})
const drawer = ref<boolean>(false)
const close = () => {
    drawer.value = false
}

const open = () => {
    drawer.value = true
}

const emits = defineEmits(["submit","closeEvent"])
const submit = () => {
    emits("submit")
}

const closeEvent = () => {
    emits("closeEvent")
}

defineExpose({
    open,
    close
})
</script>

<template>
    <el-drawer v-model="drawer" :title="title" :direction="direction" :size="size" @close="closeEvent">
        <div v-if="direction == 'ttb'" class="ttb">
            <div class="ttb-content">
                <slot name="ttb"></slot>
            </div>

            <el-button type="primary" color="var(--primary-theme-color)" @click="submit"  icon="el-icon-check">确定</el-button>
        </div>
        <div v-else-if="direction === 'rtl'" class="rtl">
            <el-scrollbar view-class="rtl-content">
                <slot name="rtl"></slot>
            </el-scrollbar>
            <div class="rtl-footer">
                <el-button type="primary" color="var(--primary-theme-color)" @click="submit" icon="el-icon-check">确定</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<style lang="scss" scoped>
.ttb {
    width: 100%;
    display: flex;

    .ttb-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

.rtl {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    .rtl-content {
        flex: 1;
    }

    .rtl-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 10px;
    }
}
</style>
